<template>
  <!-- 智能制造平台 收藏界面 -->
  <el-card>
    <div class="proper_box">
      <transition-group name="drag" class="proper_ul" tag="ul">
        <!-- dragstart(item)拖拽开始对象 -->
        <!-- 拖拽中dragenter(item, $event) -->
        <!-- dragend拖拽结束 -->
        <div @dragstart="dragstart(item)" @dragenter="dragenter(item, $event)" @dragend="dragend(item, $event)"
          :draggable="true" v-for="(item, index) in list" :key="item.li" class="proper_li">
          <div class="proper_img">
            <a class="proper_img_a" :href="item.sysUrl + '?IdToken=' + item.Token" target="_blank"
              v-on:click="doThis(item.Token)">
              <img ref="image" :src="item.imgPath" class="proper_img_a_img" />
            </a>
          </div>
          <div class="proper_title">
            <div class="proper_title_div">
              <!-- 网站标题 -->
              <div class="proper_title_div_title">{{ item.sysName }}</div>
              <div :class="item.isFavorites ? 'el-icon-star-off' : 'el-icon-star-on'" @click="collect1(index)"
                ref="collect" class="proper_title_div_collect"></div>
            </div>
            <div class="proper_title_tag">
              <!-- 网站标签 -->
              <el-tag class="proper_title_tag_tata" type="success" v-for="tag in item.sysLabel" :key="tag.id">{{ tag }}
              </el-tag>
              <el-button class="proper_title_tag_butt" icon="el-icon-warning-outline" circle
                @click="handleClick(index)"></el-button>
            </div>
          </div>
        </div>
      </transition-group>
      <!-- 详情信息 -->
      <el-dialog :title="sysName" :visible.sync="dialogVisible" width="50%" center>
        <div class="probox_tag_outline_title">{{ description }}</div>
        <el-table :data="usergridData">
          <el-table-column property="linkMan" label="姓名" width="100"></el-table-column>
          <el-table-column property="cellPhone" label="手机号" width="120"></el-table-column>
          <el-table-column property="duty" label="责任事项" width="100"></el-table-column>
          <el-table-column property="mail" label="邮箱" width="230"></el-table-column>
          <el-table-column property="cornet" label="短号" width="80"></el-table-column>
        </el-table>
        <el-button class="probox_tag_outline_butt">
          <a :href="sop" :download="sop">
            <svg t="1646266400504" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="4431" width="20" height="20">
              <path d="M19.236571 955.245714s10.020571 25.892571 23.405715 0c0 0 149.357714-450.706286 513.462857-337.188571v139.922286s5.851429 82.285714 77.604571 28.672l357.814857-309.028572s75.922286-41.252571-4.534857-97.865143L625.152 68.900571s-54.418286-38.765714-67.584 24.868572l-0.438857 150.893714c0.146286 0.146286-678.473143 32.694857-537.892572 710.656z"
                p-id="4432" fill="#707070"></path>
            </svg>
            <span class="probox_tag_outline_span">sop下载</span>
          </a>
        </el-button>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
//引入收藏与查询接口
import { getquerySystemInfo, getaddFavorites, getverifyToken } from "@/api/ssoapi/sso";
import Cookies from "js-cookie";
import { getoptionValue } from "@/api/info/projectMgmt";
import { getCodeImg } from "@/api/login";
import { decrypt,encrypt } from "@/utils/jsencrypt";

export default {
  name: "ssoindex",
  data() {
    return {
      // 改制后
      // dialogVisible: false,
      // draging: null, //被拖拽的对象
      // target: null, //目标对象
      // show: true,
      // isFavorites: false, // 默认不收藏
      // sysName: '',  // 系统名称
      // sysLabel: '',    // 系统标签
      // sysType: '',  // 系统类型
      // disabled: false,
      // description: '',
      // // sop地址
      // sop: '',
      // imglist: [],
      // list: [],
      // dragIndex: "",
      // enterIndex: "",

      // 改制后
      // 登录搜索条件
      buttonIndex: 1,
      tab: true,
      li: false,
      codeUrl: "",
      // 个人信息
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
      },
      // 验证信息
      loginRuoes: {
        username: [
          {required: true,trigger: "blur",message: "请输入账号"}
        ],
        password: [
          {required: true,trigger: "blur",message: "请输入密码"}
        ],
        code: [
          {required: true,trigger: "blur",message: "请输入验证码"}
        ],
      },
      loading: false,
      // 验证码开关
      captchaOnOff: true,
      // 注册开关
      register: false,
      redirect: undefined,
      // 查询登录结束
      // 显示搜索条件
      showSearch: true,
      dialogVisible: false,
      // 拖拽对象
      draging: null,
      // 目标对象
      target: null,
      show: true,
      // 默认不收藏
      isFavorites: false,
      // 系统ID
      sysIs: "",
      // 系统名称
      sysName: "",
      // 系统标签
      sysLabel: "",
      // 系统类型
      sysType: "",
      disables: false,
      description: '',
      // sop地址
      sop: '',
      imglist: [],
      // 总条数
      // 查询参数
      queryParams: {
        sysName: null,
        bu: null,
      },
      // 点击查询
      // 系统名称
      collectName: '',
      collectdialogVisible: false,
      // 表单校验
      rules: {
        bu: [
          {required: true,message: "BU不能为空",trigger: "blur"}
        ],
        registerId: [
          {required: true,message: "搜索条件不能为空",trigger: "blur"}
        ],
      },
      // 获取图片数据
      photoURLData: "",
      buOptionns: [],
      usergridData: [],
      list: [],
      dragIndex: "",
      enterIndex: "",
      isShow: false,
    };
  },
  created() {
    // 获取查询信息列表
    this.getSystemInfo();
    // 获取个人信息列表
    // this.getCookie();
    var session = sessionStorage.getItem("sessionObj")
  },
  methods: {
    // getverifyTokenData() {
    //   getverifyToken().then(response => {
    //     console.log("返回验证0",response)
    //     var info = response.data;
    //     // localStorage.setItem('st',JSON.stringify(info))
    //     // response.data
    //   });
    // },
    // 点击链接方法
    doThis(Token) {
      if(Token === "" || Token === undefined) {
        this.collectdialogVisible = true;
        this.isShow = true;
        var x = this.list;
        for(let i = 0;i < x.length;i ++) {
          var x1 = x[i].sysUrl = "javascript:void(0);";
          this.list.push(x1);
        }
      }
    },
    // 查询BU下拉框
    getBuList() {
      this.loading = true;
      getoptionValue().then(response => {
        // console.log("测试加载",response);
        this.buOptions = response.data;
        this.loading = false;
      });
    },
    // 查询信息列表
    getSystemInfo() {
      let tempData = {
        "sysName": "",
        "sysLabel": "",
        "sysType": "",
        "isFavorites": "",
      }

      tempData.sysName = this.sysName;
      tempData.sysLabel = this.sysLabel;
      tempData.sysType = this.sysType;
      tempData.isFavorites = "1";

      let str = JSON.stringify(tempData);
      const checkId = Cookies.get("Admin-Token");
      console.log("測試", checkId)
      // RUOYI封装的请求方法
      getquerySystemInfo(str).then(response => {
        console.log("测试111", response.data);
        this.list = response.data;
        this.list.forEach((item, index) => {
          item['li'] = index;
          item['Token'] = checkId;
        });
      });
    },
    // 拖拽方法
    dragstart(value) {
      // console.log("测试拖拽开始",value);
      // 拖拽的当前数据
      this.oldData = value;
    },
    // 记录移动过程中信息
    dragenter(value, e) {
      // 两条数据,拖动的数据,与交换的数据
      // console.log("测试拖拽开始移动过程中的信息value",value);
      // 各个信息
      // console.log("测试拖拽开始移动过程中的信息e",e);
      this.newData = value;
      // 各个信息组织冒泡
      e.preventDefault();
    },
    // 拖拽最终操作
    dragend(value, e) {
      if (this.oldData !== this.newData) {
        let oldIndex = this.list.indexOf(this.oldData);
        let newIndex = this.list.indexOf(this.newData);
        let newItems = [...this.list];
        // 删除老的节点
        newItems.splice(oldIndex, 1);
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData);
        this.list = [...newItems];
        this.$nextTick(() => {
          this.imglist = this.list;
        })
      }
    },
    shuffle() {
      this.list = this.$shuffle(this.list);
    },
    // 点击星号收藏
    collect1(index) {
      this.list[index].isFavorites = !this.list[index].isFavorites;
      let collectData = {
        "sysId": "",
      }
      collectData.sysId = this.list[index].sysId;
      let str2 = JSON.stringify(collectData);
      if(this.list[index].isFavorites) {
        getaddFavorites(str2).then(response => {
          if(response.code === 200) {
            this.$notify({
              title: response.msg,
              message: response.msg,
              type: "success",
              offset: 100,
            });
            this.list[index].isFavorites = true;
          }else {
            this.$notify.error({
              title: "错误",
              message: response.msg,
              offset: 100,
            });
          }
        });
      }else {// 取消收藏false
        getaddFavorites(str2).then(response => {
          if(response.code === 200) {
            this.$notify({
              title: response.msg,
              message: response.msg,
              type: "success",
              offset: 100,
            });
            this.list[index].isFavorites = false;
          }else {
            this.$notify.error({
              title: "错误",
              message: response.msg,
              offset: 100,
            });
          }
        });
      }
    },
    // 点击直接进入按钮
    lineLogin() {
      let photourlDatalist = list.photourlData;
      console.log("测试连接",photourlDatalist);
      // 页面跳转到登录页
      window.location.href = photourlDatalist;
    },
    // 点击关闭按钮
    lineLoginclose() {
      this.collectdialogVisible = false;
    },
    // 验证码
    getCode() {
      getCodeImg().then(res => {
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        if(this.captchaOnOff) {
          // 把返回的图片拼接base64编码的gif图片数据
          this.codeUrl = "data:image/gif;base64,"; + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    // 校验Cookie身份信息
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        // 对password进行加密
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      }
    },
    // 获取登录方法
    handleLogin() {
      this.$refs.loginform.validate(valid => {
        if(valid) {
          this.loading = true;
          if(this.loginForm.password) {
            // Cookies有效期30天
            Cookies.set("username",this.loginForm.username,{expires: 30});
            Cookies.set("password",encrypt(this.loginForm.password),{expires: 30});
          }else {
            Cookies.remove("username");
            Cookies.remove("password");
          }
          this.$store.dispatch('Login', this.loginForm).then(() => {
            console.log("测试重定向",this.redirect);
            this.$router.push({path: this.redirect || "/"}).catch(() => {});
          }).catch(() => {
            this.loading = false;
            if(this.captchaOnOff) {
              this.getCode();
            }
          });
        }
      });
    },
    // 详情信息的方法
    handleClick(index) {
      console.log("测试handleClick", index);
      this.dialogVisible = true;
      console.log("测试list",this.list);
      this.sysName = this.list[index].sysName;
      console.log("测试11",this.sysName);
      this.usergridData = this.list[index].linkMan;
      console.log("测试描述",this.usergridData);
      this.sop = this.list[index].sopUrl;
      this.description = this.list[index].description;
    },
    // 下载方法
    download(sop) {
      window.open(sop);
    },
  },
};
</script>

<style scoped>
* {
  padding: 0px;
  margin: 0px;
}

.proper_box {
  margin: 20px 20px 0px 10px;
  height: 100%;
}

.proper_ul {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-flow: wrap;
  align-content: flex-start;
}

.proper_li {
  width: 280px;
  height: 320px;
  margin: 30px 30px 20px 30px;
  border: 1px solid rgb(149, 149, 149);
  border-radius: 5px;
}

.proper_li:hover {
  box-shadow: 1px 5px 20px 3px rgba(149, 149, 149, 0.3)
}

.proper_img {
  width: 280px;
  height: 220px;
}

.proper_img_a {
  width: 278px;
  height: 220px;
  border-radius: 5px;
}

.proper_img_a_img {
  width: 278px;
  height: 220px;
  border-radius: 5px;
}

.proper_title {
  width: 278px;
  height: 100px;
}

.proper_title_div {
  width: 98%;
  height: 55px;
  margin: 3px 0px 3px 5px;
  position: relative;
}

.proper_title_div_title {
  position: absolute;
}

.proper_title_div_collect {
  position: absolute;
}

.el-icon-star-on {
  cursor: pointer;
  margin: 27px 0px 0px 245px;
  font-size: 27px;
}

.el-icon-star-off {
  cursor: pointer;
  margin: 25px 0px 0px 240px;
  font-size: 27px;
}

.el-icon-star-on:hover {
  animation-name: star1;
  animation-duration: 2s;
}

.el-icon-star-off:hover {
  animation-name: star1;
  animation-duration: 2s;
}

@keyframes star1 {
  0% {
    transform: scale(0.7);
  }

  100% {
    transform: scale(1.2);
  }
}

.proper_title_tag {
  width: 100%;
  height: 35px;
  margin: 5px 0px 0px 2px;
  position: relative;
}

.proper_title_tag_tata {
  margin-right: 5px;
  padding: 0px 7px;
}

.proper_title_tag_butt {
  width: 1px;
  height: 1px;
  margin: 0px 27px;
  padding: 0px;
  font-size: 27px;
  position: absolute;
  top: 5px;
  right: 3px;
}

.el-icon-warning-outline {
  font-size: 27px;
}

.probox_tag_outline_span {
  margin: 3px;
  padding: 3px;
}

.probox_tag_outline_butt {
  margin: 10px;
  padding: 10px;
}
</style>
